<template>
  <div>
    <el-dialog
      title="工作日志"
      :visible.sync="visible"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="提出科室" prop="needDept">
          <el-select
            v-model="form.needDept"
            placeholder="请选择"
            style="width: 100%"
          >
            <el-option
              v-for="dict in dict.type.crm_project_dept"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="其他科室"
          prop="otherDept"

          v-if="form.needDept === '8'"
        >
          <el-input v-model="form.otherDept" placeholder="请输入科室名称"></el-input>
        </el-form-item>
        <el-form-item label="客户" prop="customerId">
          <el-select
            v-model="form.customerId"
            filterable
            placeholder="请选择客户"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in customerList"
              :key="item.customerId"
              :label="item.customerName"
              :value="item.customerId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工作内容" prop="workLog">
          <editor v-model="form.workLog" :min-height="192"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { addWork } from "@/api/crm/work";
import { getCustomerList } from "@/api/crm/customer";

export default {
  name: "addWorklog",
  dicts: ["crm_project_dept"],
  data() {
    return {
      rules: {
        needDept: [
          { required: true, message: "请选择科室", trigger: "change" },
        ],
        otherDept: [
          { required: true, message: "科室信息不能为空", trigger: "blur" },
        ],
        customerId: [
          { required: true, message: "请选择客户", trigger: "change" },
        ],
        workLog: [
          { required: true, message: "请填写工作日志", trigger: "blur" },
        ],
      },
      visible: false,
      form: {},
      customerList: [],
    };
  },
  methods: {
    getCustomerList() {
      getCustomerList().then((res) => {
        this.customerList = res.data;
      });
    },
    open(row) {
      this.visible = true;
      this.form.projectId = row.projectId
      this.getCustomerList();
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workId: null,
        needDept: null,
        otherDept: null,
        customerId: null,
        workLog: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addWork(this.form).then((response) => {
            this.$modal.msgSuccess("新增成功");
            this.visible = false;
          });
        }
      });
    },
  },
};
</script>